<template>
	<view class="view-nav-bar">
		<uni-nav-bar fixed statusBar showMenuButtonWidth border="false" color="#fff" backgroundColor="#06cf8b"
			leftWidth="420rpx">
			<template v-slot:left>
				<view class="position" @click="clickPosition">
					<view class="left">
						<image src="/static/position_1.png"></image>
					</view>
					<view class="center">
						<text>四川南充营山磨子街</text>
					</view>
					<view>
						<uni-icons type="down" size="14" color="#fff" />
					</view>
				</view>
			</template>
		</uni-nav-bar>
		<uni-nav-bar fixed border="false" color="#999" backgroundColor="#06cf8b" left-width="0" right-width="0">
			<view class="input-view">
				<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
				<input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词" @confirm="confirm"
					v-model="search" />
				<view class="placeholder"></view>
				<view class="search" @click="clickSearch"><text>搜索</text></view>
			</view>
		</uni-nav-bar>
	</view>

	<view class="layout">
		<view class="list">
			<view class="item" v-for="(item,index) in blogList" :key="index">
				<view class="userinfo">
					<view class="avatar">
						<image class="pic" :src="item.userImgUrl" mode="aspectFill"></image>
					</view>
					<view class="username">
						{{item.user_id[0].nickname || "匿名"}}
					</view>
					<view class="icons" style="display:flex; margin-left: auto;">
					    <!-- 关键：用style固定宽高，单位统一为rpx，确保宽高相等 -->
					    <uni-icons @click="makePhoneCall" type="phone-filled" color="#06cf8b" style="width: 40rpx; height: 40rpx; background-color: #eee; border-radius: 50%; padding: 8rpx; margin: 0 8rpx; display: flex;align-items: center;justify-content: center;"></uni-icons>
					    <uni-icons type="weixin" color="#06cf8b" style="width: 40rpx; height: 40rpx; background-color: #eee; border-radius: 50%; padding: 8rpx; margin: 0 8rpx; display: flex;align-items: center;justify-content: center;"></uni-icons>
					  </view>
				</view>
				<view class="body">
					<view class="text">
						<view class="font">{{item.content}}</view>
					</view>
					<view class="piclist" v-if="item.pics.length">
						<view class="pic" v-for="(pic,index) in item.pics" :key="index">
							<image :src="pic.url" mode="aspectFill" @click="clickImg(pic)"></image>
						</view>
					</view>
				</view>


				<view class="info">
					<view class="left">
						<uni-dateformat :date="item.publish_date" format="MM月dd hh:mm"
							:threshold="[60000,3600000*24*30]" style="font-size:12px;"></uni-dateformat>
					</view>
					<view class="right">
						<view class="remove" v-if="isPermission(item.user_id[0]._id)" @click="remove(item._id)">
							<uni-icons type="trash-filled" size="14" color="#999"></uni-icons><text
								style="font-size:12px;">删除</text>
						</view>
					</view>
				</view>

			</view>
		</view>


		<!-- <uni-fab ref="fab" :pattern="{icon:'compose'}" horizontal="right" vertical="bottom" @fabClick="goAdd" /> -->
	</view>

	<custom-tabbar></custom-tabbar>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		isPermission,
		convertCloudUrl
	} from "@/utils/common.js"

	const search = ref("");

	const blogCloudObj = uniCloud.importObject("blogCloudObj")
	const blogList = ref([]);

	uni.$on("editEvent", () => {
		getData();
	})


	const getData = async () => {
		let {
			errCode,
			data
		} = await blogCloudObj.list();
		data.forEach(item => {
			let url = item.user_id[0].avatar_file.url;
			item.userImgUrl = url === undefined || url === null ? "/static/defAvatar.png" :
				convertCloudUrl(url);
		});
		blogList.value = data;
	}


	//删除一条博客
	const remove = async (id) => {
		try {
			let feedback = await uni.showModal({
				title: "是否确认删除?"
			})
			if (!feedback.confirm) return;
			let {
				errCode
			} = await blogCloudObj.remove(id);
			if (errCode == 0) {
				getData();
			}
		} catch (err) {
			uni.showToast({
				title: err,
				icon: "none"
			})
		}

	}


	const goAdd = () => {
		uni.navigateTo({
			url: "/pages/blog/edit"
		})
	}

	getData();

	const clickImg = (pic) => {
		uni.previewImage({
			urls: [pic.url]
		});
	}

	const clickPosition = () => {
		uni.showModal({
			content: "点击定位！！！"
		})
	}

	const clickSearch = () => {
		uni.showModal({
			content: "点击搜索！！！" + search.value
		})
	}
	
	const makePhoneCall = () => {
		uni.makePhoneCall({
			phoneNumber:'15311112222'
		})
	}
</script>

<style lang="scss" scoped>
	.layout {
		.list {
			background-color: #f4f4f4;

			.item {
				background-color: #fff;
				border-radius: 30rpx;
				padding: 40rpx 30rpx;
				margin: 0 20rpx;
				border-bottom: 10px solid #f4f4f4;

				&:first-child {
					border-top: 10px solid #f4f4f4;
				}

				.userinfo {
					display: flex;
					align-items: center;
					border-bottom: 1px solid #f4f4f4;
					padding-bottom: 30rpx;

					.avatar {
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
						overflow: hidden;
						margin-right: 10rpx;

						.pic {
							width: 100%;
							height: 100%;
						}
					}

					.username {
						font-size: 28rpx;
						color: #333;
					}
				}

				.body {
					padding: 15rpx 0 30rpx;

					.text {
						padding-bottom: 10rpx;
						font-size: 40rpx;
						text-align: justify;
						color: #111;
						line-height: 1.7em;

						.font {
							font-size: 14px;
							text-overflow: -o-ellipsis-lastline;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							line-clamp: 2;
							-webkit-box-orient: vertical;
							width: 100%;
							word-break: break-all;
						}
					}

					.piclist {
						display: grid;
						grid-template-columns: repeat(3, 1fr);
						gap: 15rpx;
						padding-top: 20rpx;

						.pic {
							overflow: hidden;
							border-radius: 10rpx;
							aspect-ratio: 1 / 1;
							border-radius: 10rpx;
							width: 100rpx;
							height: 100rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

					}
				}


				.info {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 28rpx;
					color: #999;

					.right {
						display: flex;
						align-items: center;

						.ipname {
							margin-right: 20rpx;
						}
					}
				}
			}
		}
	}

	//-------------------下面是导航栏搜索框样式-------------------

	$nav-height: 30px;

	.view-nav-bar {
		padding: 0 30rpx;

		.position {
			padding: 0 30rpx;
			display: flex;
			align-items: center;

			.left {
				image {
					display: block;
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%;
				}
			}

			.center {
				margin: 0 15rpx;

				text {
					font-size: 12px;
				}
			}
		}

		.input-view {
			display: flex;
			flex-direction: row;
			// width: 500rpx;
			flex: 1;
			background-color: #f8f8f8;
			height: $nav-height;
			border-radius: 10px;
			padding-left: 15px;
			flex-wrap: nowrap;
			margin: 7px 0;
			line-height: $nav-height;

			.input-uni-icon {
				line-height: $nav-height;
			}

			.nav-bar-input {
				height: $nav-height;
				line-height: $nav-height;
				/* #ifdef APP-PLUS-NVUE */
				width: 370rpx;
				/* #endif */
				padding: 0 5px;
				font-size: 12px;
				background-color: #f8f8f8;
			}

			/* 添加一个弹性占位元素 */
			.placeholder {
				flex: 1;
				/* 占据剩余空间，将搜索按钮推到右侧 */
			}

			.search {
				width: 100rpx;
				background-color: #06cf8b;
				color: #fff;
				border-radius: 10px;
				display: flex;
				justify-content: center;
				margin: 6rpx;
				align-items: center;
			}
		}
	}
</style>